<template>
  <div>
    <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin-left: 10px; margin-bottom: 10px">
      <a-form-item label="账号">
        <j-input placeholder="输入账号模糊查询" v-model="queryParam.username"></j-input>
      </a-form-item>

      <a-form-item label="姓名">
        <j-input placeholder="输入姓名模糊查询" v-model="queryParam.realname"></j-input>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
      </a-form-item>
    </a-form>

    <a-table
      rowKey="id"
      size="small"
      :bordered="true"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, type: 'radio', onChange: onSelectChange }"
      :customRow="clickThenCheck"
      style="height: 100%"
      @change="handleTableChange"
    />
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { serviceApi } from '@/api/common.js'

export default {
  name: 'LsUser',
  data() {
    return {
      loading: false,
      columns: [
        { title: '账号', align: 'center', dataIndex: 'username', width: 200 },
        { title: '姓名', align: 'center', dataIndex: 'realname', width: 200 },
      ],
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      selectedRowKeys: [],
      rowSelection: {
        type: 'radio',
        selectedRowKeys: this.selectedRowKeys,
        onChange: (keys, rows) => this.onSelectChange(keys, rows),
      },
      queryParam: {
        username: '',
        realname: '',
      },
      url: serviceApi.auth + '/users',
    }
  },
  created() {
    console.log('online 权限 查看用户信息')
    this.loadData(1)
  },
  methods: {
    onSelectChange(keys, rows) {
      console.log(rows)
      this.selectionRows = rows
      this.selectedRowKeys = keys
      this.$emit('select', rows[0].id)
    },
    clickThenCheck(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.id.split(','), [record])
          },
        },
      }
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    loadData(arg) {
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.pagination.current = 1
      }
      let params = Object.assign(
        {},
        {
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.current,
          status: 1,
        },
        this.queryParam
      )
      this.loading = true
      getAction(this.url, params).then((res) => {
        console.log(res)
        if (res.success) {
          this.dataSource = res.result.rows
          this.pagination.total = res.result.totalRows
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    searchQuery() {
      this.loadData(1)
    },
    searchReset() {
      this.queryParam = {
        username: '',
        realname: '',
      }
      this.loadData(1)
    },
    clearSelect() {
      this.selectionRows = []
      this.selectedRowKeys = []
    },
  },
}
</script>

<style scoped>
</style>
